<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 100px;
            height: 100px;
        }

        .container1 {
            height: 200px;
        }

        .container2 {
            height: 200px;
        }

        .container3 {
            height: 200px;
        }

        .container1 .box1 {
            background: red;
            display: block;
        }

        .container1 .box2 {
            background: blue;
            display: none;
        }

        .container1 .box3 {
            background: yellow;
            display: none;
        }

        .container2 .box1 {
            background: red;
            display: block;
        }

        .container2 .box2 {
            background: blue;
            display: none;
        }

        .container2 .box3 {
            background: yellow;
            display: none;
        }

        .container3 .box1 {
            background: red;
            display: block;
        }

        .container3 .box2 {
            background: blue;
            display: none;
        }

        .container3 .box3 {
            background: yellow;
            display: none;
        }
    </style>
</head>

<body>
    <div class="container1">
        <button>按钮一</button>
        <button>按钮二</button>
        <button>按钮三</button>
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
    </div>

    <div class="container2">
        <button>按钮一</button>
        <button>按钮二</button>
        <button>按钮三</button>
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
    </div>
    <button class="next">点击我切换第二个选线卡下一页</button>

    <div class="container3">
        <button>按钮一</button>
        <button>按钮二</button>
        <button>按钮三</button>
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
    </div>
    <script>
        // 一个选项卡 ，随便写 ，按照事物发展的顺序书写代码 ，面向过程，注重过程；

        //核心思路就是通过特定索引显示指定的div盒子,自定义生成指定索引的方法

        // 工厂模式
        function tab(btns, divs) {
            // 共性问题 
            btns.forEach((item, key) => {
                item.onclick = function () {
                    forDiv(key);
                }
            })

            //显示指定索引号的div
            function forDiv(key) {
                divs.forEach((div, k) => {
                    if (key === k) {
                        // 点击按钮的索引 ，把和按钮索引一样的div 显示出来
                        div.style.display = "block";
                    } else {
                        // 把和点击按钮不同的 div 隐藏起来
                        div.style.display = "none";
                    }
                })
            }

            let obj = {}; // 加原料
            obj.forDiv = forDiv;  // 加工原料

            return obj;  // 出厂 
        }



        // 多个选项卡 ，提高复用性， 函数封装 ；
        let btns = document.querySelectorAll(".container1 button");
        let divs = document.querySelectorAll(".container1 div");
        tab(btns, divs);


        let btn2s = document.querySelectorAll(".container2 button");
        let div2s = document.querySelectorAll(".container2 div");
        let tab2 = tab(btn2s, div2s);
        let nextBtn = document.querySelector(".next");
        let tabKey = 0;
        nextBtn.onclick = function () {
            tabKey++;
            if (tabKey > 2) {
                tabKey = 0;
            }
            tab2.forDiv(tabKey);
        }





        let btn3s = document.querySelectorAll(".container3 button");
        let div3s = document.querySelectorAll(".container3 div");
        let tab3 = tab(btn3s, div3s);

        let num = 0;
        setInterval(() => {
            num++;
            if (num > 2) {
                num = 0;
            }
            tab3.forDiv(num);
        }, 1000)



    </script>
</body>

</html>